import './mdc.scss'
import {computed, designComponent} from "plain-ui-composition";
import {processMdc} from "./process/processMdc";
import {Markdown} from "./markdown/markdown";
import {isMdcTable} from "./process/processTableString";
import {MdcTableComponent} from "./mdc-table";

import {MdcCaseComponent} from "./mdc-case";

export const Mdc = designComponent({
    props: {
        content: {type: String, required: true},
    },
    setup({props}) {

        const mdcList = computed(() => processMdc(props.content))

        return {
            render: () => (
                <div class="pl-mdc">
                    {mdcList.value.map((mdc, index) => typeof mdc === "string" ? (
                        <div class="pl-mdc-card" key={index}>
                            <Markdown md={mdc}/>
                        </div>
                    ) : (
                        (isMdcTable(mdc)) ? (
                            <div class="pl-mdc-card" key={index}>
                                <MdcTableComponent mdc={mdc}/>
                            </div>
                        ) : (
                            <div class="pl-mdc-card" key={index}>
                                <MdcCaseComponent mdc={mdc}/>
                            </div>
                        )
                    ))}
                </div>
            )
        }
    },
})
